<template>
	<view class="recommend">
		<view class="recommend-item">
			<image class="item-big"
				src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjJBBfHyiSi9YitxE-9kYVDJmBmdfnkZ3GrQ&usqp=CAU"
				mode="" @tap="goDetails()"></image>
			<view class="item-small " v-for="(item,index) in imglist.slice(0,3)" :key="index" @tap="goDetails()">
				<image class="item-img" :src="item.imgUrl" mode=""></image>
			</view>
		</view>
		<view class="recommend-item">
			<image class="item-big"
				src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTc9aFltV4PVON4zlKBeTqxnU1MNXMxwpCtMQ&usqp=CAU"
				mode="" @tap="goDetails()"></image>
			<view class="item-small" v-for="(item,index) in imglist.slice(3,6)" :key="index" @tap="goDetails()">
				<image class="item-img" :src="item.imgUrl" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				"imglist": [{
						"id": 1,
						"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZ69vVbjMCTJGzQ3JivaSfvn8tNLlFe3npRg&usqp=CAU"
					},
					{
						"id": 2,
						"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgEBF7DgvXVubvB-xrnHmm3nXGGx58p8rZMQ&usqp=CAU"
					},
					{
						"id": 3,
						"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjtfcJi2ccAFj9_QtTN2BwGNDqyVg6gX5wFA&usqp=CAU"
					},
					{
						"id": 4,
						"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRchsygftnPEkarGGqKX7VErAObe1caXwyL8Q&usqp=CAU"
					},
					{
						"id": 5,
						"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmaz9z10KsdfPKhbX6RDFyfS0EeUIRdVx5nw&usqp=CAU"
					},
					{
						"id": 6,
						"imgUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQUxs-myw9i5W31A4Mf5zaVf0yjEyhc9heZUA&usqp=CAU"
					}
				]
			}
		},
		methods:{
			goDetails(){
				uni.navigateTo({
					url:'/pages/details/details'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recommend{
		// background-color: #eed8aa;
		padding: 0 20rpx;
		.recommend-item{
			border-radius: 20rpx;
			border:2px solid #CCCCCC;
			margin-bottom: 20rpx;
			.item-big{
				width: 100%;
				height: 300rpx;
			}
			.item-small{
				width: 100%;
				height: 240rpx;
				display: inline;
				.item-img{
					width: 33.333%;
					height: 240rpx;
				}
			}
		}
	}
</style>
